<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>找回密码</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="../jquery.min.js"></script>
</head>

<body>
    <!--说明： 分为三个大模块是按照步骤，最开始只显示找回账号DOM，点击下一步后切换到下一个容器，上一个不显示，依次类推 -->
    <div class="one">
        <div class="title">
            <span class="active"><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item">
                <label>请输入手机号：</label>
                <input id="phone" type="text">
            </div>
            <button class="down">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <div class="one" style="display: none">
        <br>
<!--        <hr>-->

        <div class="title" >

            <span><i>1</i>输入找回账号</span>
            <span class="active"><i>2</i>回答密保问题</span>
            <span><i>3</i>重置密码</span>
        </div>
        <div class="box" >
            <div class="input-item">
                <label> 用户名：</label>
                <input type="text" value="xxxx" id="username" disabled>
            </div>
            <div class="input-item">
                <label> 手机号：</label>
                <input type="text" value="xxxx" id="yphone" disabled>
            </div>
            <div class="input-item">
                <label>密保问题：</label>
                <input type="text" value="xxxxxxx" id="yquestion"  disabled>
            </div>
            <div class="input-item">
                <label>密保答案：</label>
                <input type="text" id="question">
            </div>
            <button class="up">上一步</button>
            <button class="down1">下一步</button>
        </div>
    </div>
    <!----------------------------------------------------->
    <div class="one" style="display: none">
        <br>
<!--        <hr>-->
        <div class="title" >
            <span><i>1</i>输入找回账号</span>
            <span><i>2</i>回答密保问题</span>
            <span class="active"><i>3</i>重置密码</span>
        </div>
        <div class="box">
            <div class="input-item" >
                <label >请输入新密码：</label>
                <input type="text" id="password">
                <button class="up">上一步</button>
                <button id="x">立即重置</button>
            </div>

        </div>
    </div>


    <script>

        $(function (){

            let ones = document.querySelectorAll(".one")
            let i = 0;

            //判断手机号和密保问题
        //     $(".down1").on("click", function (){
        //         const phone = $("#phone").val() || 0
        //         const question = $("#question").val() || 0
        //     $.ajax({
        //         method: "GET",
        //         url:'http://124.223.14.236:3001/api/user/findPwd',
        //         data:{
        //             phone,
        //             question,
        //         },
        //         success(res) {
        //             console.log(res)
        //             let {data} = res
        //             console.log(data)
        //             $("#username").val(data.username)
        //
        //             //判断
        //             if(res.success){
        //                 i++
        //                 // console.log(ones[i])
        //                 ones[i].style.display = "block"
        //                 ones[i-1].style.display = "none"
        //             } else {
        //                 alert("未通过验证")
        //             }
        //         }
        //     })
        // })

                //下一步
                $(".down").on("click", function (){

                    const phone = $("#phone").val() || 0

                    $.ajax({
                        method: "GET",
                        url:'http://124.223.14.236:3001/api/user/findPwd',
                        data:{
                            phone,
                        },
                        success(res) {
                            let {data} = res
                            const id = data.id
                            $("#username").val(data.username)
                            $("#yphone").val(data.phone)
                            $("#yquestion").val(data.question)
                            //判断
                            if(data.phone){
                                i++
                                // console.log(ones[i])
                                ones[i].style.display = "block"
                                ones[i-1].style.display = "none"
                            } else {
                                alert("手机号未注册")
                            }
                            //修改密码，判断密保
                            $(".down1, #x").on("click", function (e){
                                console.log(1)
                                const password = $("#password").val() || 0
                                const answer = $("#question").val() || 0
console.log(password)
                                $.ajax({
                                    method:'POST',
                                    url:'http://124.223.14.236:3001/api/user/resetPwd',
                                    data:{
                                        id,
                                        answer,
                                        password,
                                    },
                                    success:function(res){
                                        console.log(res);
                                        if(res.success) {
                                            i++
                                            // console.log(ones[i])
                                            if (i < 3) {
                                            ones[i].style.display = "block"
                                            ones[i - 1].style.display = "none"
                                         }
                                        }
                                    }
                                })
                            })
                        }
                    })
                })

                //上一步
                $(".up").on("click", function (){
                i--
                console.log(ones[i])
                ones[i].style.display = "block"
                ones[i+1].style.display = "none"
            })



        })





    </script>
</body>

</html>